import React, { Component } from 'react';
import { ThemeContext } from '../context/theme-context';
import { UserContext } from "../context/user-context.js";
class ProductItem extends Component {

  constructor(props) {
    super(props);
  }

  render() { 
    //获取context数据
    const { color, size } = this.context;
    return (
      <div>
        <h4 style={{color: color, fontSize: size}}>ProductItem</h4>
        <p>{color} - {size}</p>
        {/* 使用多个context，借助context.consumer */}
        <UserContext.Consumer>
          {
            value => {
              return <h2>{value.nickName}</h2>
            }
          }
        </UserContext.Consumer>
      </div>
     );
  }
}

// 从context取的时候有点麻烦
//设置组件的ContextType的类型
 ProductItem.contextType = ThemeContext

export default ProductItem;